<template>
  <a-modal v-model:open="isShow" title="新增角色" @cancel="handleCancelRole" style="width: 700px">
    <a-form ref="form" :model="formState" :rules="rules" style="margin-top: 30px" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
      <a-form-item label="角色编码" name="roleCode">
        <a-input v-model:value="formState.roleCode"/>
      </a-form-item>
      <a-form-item label="角色名称" name="roleName">
        <a-input v-model:value="formState.roleName" />
      </a-form-item>
      <a-form-item label="描述" name="description">
        <a-textarea v-model:value="formState.description" :rows="4" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button @click="handleCancelRole">取消</a-button>
      <a-button type="primary" :loading="btnLoading" @click="handleRole">确定</a-button>
    </template>
  </a-modal>
</template>
<script setup>
import {computed, reactive, ref} from "vue";
import {checkUserName} from "@/api/system/user.js";
import {message} from "ant-design-vue";
import {addRole} from "@/api/system/role.js";
const form = ref()
const btnLoading = ref(false)
const emit = defineEmits(['close'])
const props = defineProps({
  openRole: {
    type: Boolean,
    default: false
  },
})
const formState = reactive({
  roleCode: '',
  roleName: '',
  description: '',
})
const isShow = computed(() => {
  return props.openRole
})
/**
 * 关闭新增角色信息
 */
const handleCancelRole = () => {
  emit('close')
  form.value.resetFields()
}
/**
 * 提交角色信息
 */
const handleRole = () => {
  form.value.validate().then(async() => {
    btnLoading.value = true
    const res = await addRole(formState)
    if(res.success){
      message.success(res.message);
      emit('close');
      form.value.resetFields();
    }else{
      message.warning(res.message);
    }
    btnLoading.value = false
  }).catch(err=>{
    console.log('err', err)
    btnLoading.value = false
  })
}
/**
 * 验证角色编码是否存在
 * @param rule
 * @param value
 * @returns {Promise<void>}
 */
const validateRoleCode = async (rule, value) => {
  if(/[\u4E00-\u9FA5]/g.test(value)){
     return Promise.reject("角色编码不可输入汉字!");
  }else{
    let params = {
      tableName: "app_role",
      fieldName: "role_code",
      fieldVal: value,
      dataId: formState.id,
    };
    const res = await checkUserName(params)
      if(res.success){
        return Promise.resolve();
      }else{
        return Promise.reject("角色编码已存在!");
      }

  }
}
/**
 * 验证规则
 * @type {{roleCode: [{message: string, required: boolean},{min: number, max: number, trigger: string, message: string},{validator: ((function(*, *): Promise<void>)|*)}], roleName: [{message: string, required: boolean},{min: number, max: number, trigger: string, message: string}], descriptions: [{min: number, max: number, trigger: string, message: string}]}}
 */
const rules = {
  roleName: [
    { required: true, message: '请输入角色名称!' },
    { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
  ],
  roleCode: [
    { required: true, message: '请输入角色名称!'},
    { min: 0, max: 64, message: '长度不超过 64 个字符', trigger: 'blur' },
    { validator: validateRoleCode}
  ],
  description: [
    { min: 0, max: 126, message: '长度不超过 126 个字符', trigger: 'blur' }
  ]
}
</script>
<style scoped>

</style>
